Roberto Martín's profile

Guía de componentes Bankia

Múltiples herramientas corporativas en Bankia no han seguido los patrones marcados por el Departamento de Usabilidad y además no tienen la suficiente consistencia para dar soporte a todas las necesidades.

Para solucionarlo se decide crear una Guía de Componentes del que los distintos equipos de desarrollo puedan extraer sus cotas, diseños, pautas, etc.

Debe resultar ágil y funcional, optimizar los tiempos de desarrollo y solucionar las inconsistencias entre equipos y departamentos.
Recopilo el material existente en diversas plataformas y unifico los componentes con la misma función pero distinto diseño, realizando adaptaciones cuando es necesario.

Igualmente creamos componentes nuevos previendo su futura necesidad, creando una completa librería.

En este momento se analiza la accesibilidad de los mismos y se procede a hacer las adaptaciones necesarias principalmente de color y tamaños de tipografías.
Necesitamos una estructura jerárquica clara e intuitiva para que el usuario pueda encontrar rápidamente el contenido que busca.

El equipo opta por el diseño atómico: del elemento más sencillo al más complejo.
Realizamos un estudio de algunas de las guias existentes, con aportaciones de todos los componentes del equipo y reuniones de puesta en común. Destacamos tanto estructura y como elementos que nos gustan de diversas guías existentes (como Material designAppleAngularMicrosoft)
Y generamos un documento de referencias del que extraemos conclusiones:
Estructuramos los componentes, acordamos una nomenclatura para cada uno de ellos y surgen algunos que no han sido diseñados.

Este ejercicio además nos deja claro no sólo la estructura del menú de la guía sino la de su diseño.
Las conclusiones del cardsorting y el benchmark nos hacen apostar por esta sencilla estructura: una home con tres módulos principales, conceptos generales, componentes de interface y recursos y una navegación en profundidad por la jerarquía definida hasta la ficha de cada elemento.
A partir de estas conclusiones me encargo de plantear el diseño:

1. Comienzo bocetando unos sencillos esquemas de las tres páginas principales.
2. Realizo un prototipo en Axure distribuyendo el contenido y con interacciones que explican el funcionamiento.
3. Tras su validación paso a realizar el UI con el diseño visual definitivo.
Guía de componentes Bankia
Published:

Owner

Guía de componentes Bankia

Published: